<template>
  <base-item title="平台运行情况">
    <template #content>
      <div class="flex flex-justify-content-between flex-wrap item-style2">
        <img :src="showObj.url" alt="" class="item-style2bg">
        <div
            v-for="(item,index) in showObj.list" :key="index" class="item-style-box"
            :class="index<6 ? 'mb-4':''"
            :style="itemStyle2[index]">
          <div class="name font-16">{{ item.name }}</div>
          <div class="count flex flex-align-end">
            <div class="count-num" v-if="item.unit=='宗'">
              {{ +item.count > 1000 ? (+item.count).toLocaleString() : item.count }}
            </div>
            <div class="count-num" v-else>
              {{isNaN(+item.count) ? '0.00':(+item.count).toFixed(2) }}
            </div>
            <div class="count-unit">{{ item.unit }}</div>
            <template v-if="item.value=='year117Num'||item.value=='today117Num'">
              <div class="count-num">({{(+item.count / showObj.list[index - 1].count * 100).toFixed(2) }}%)</div>
            </template>
          </div>
        </div>
      </div>
    </template>
  </base-item>
</template>

<script setup lang="ts">
//组件

//接口


//api
import {reactive, ref, watch} from 'vue';
import useSystemStore from "@/store/modules/system/system";
import useHomeStore from "@/store/modules/home/home";
import BaseItem from "@/views/home/compoments/baseItem.vue";
import {getAssetsFile} from "@/utils/getAssets";

//data
const systemStore = useSystemStore()
const homeStore = useHomeStore()
const itemStyle2 = [
  'margin-left:68px',
  'margin-right:68px',
  'margin-left:12px',
  'margin-right:12px',
  'margin-left:12px',
  'margin-right:12px',
  'margin-left:68px',
  'margin-right:68px']

let itemStyle2Data = ref([
  {
    url: getAssetsFile('img/home', 'ysx.gif'),
    name: 'ysx',
    list: [
      {
        name: '本年受理工单总量',
        count: 0,
        unit: '宗',
        value: 'yearTotal'
      },
      {
        name: '本年日均受理工单量',
        count: 0,
        unit: '宗',
        value: 'yearAvg'
      },
      {
        name: '本日受理工单总量',
        count: 0,
        unit: '宗',
        value: 'todayNum'
      },
      {
        name: '本日转办工单总量',
        count: 0,
        unit: '宗',
        value: 'toDeptNum'
      },
      {
        name: '本日办结率',
        count: 0,
        unit: '%',
        value: 'bjl'
      },
      {
        name: '本日服务过程满意率',
        count: 0,
        unit: '%',
        value: 'servMyd'
      },
      {
        name: '创文事项办结率',
        count: 0,
        unit: '%',
        value: 'cwBjl'
      },
      {
        name: '创文事项满意率',
        count: 0,
        unit: '%',
        value: 'cwMyl'
      }
    ]
  },
  {
    url: getAssetsFile('img/home', 'scztsq.gif'),
    name: 'sczt',
    list: [
      {
        name: '本年受理企业诉求总量',
        count: 0,
        unit: '宗',
        value: 'yearTotal'
      },
      {
        name: '本年“117”机制办理事项量',
        count: 0,
        unit: '宗',
        value: 'year117Num'
      },
      {
        name: '本日受理企业诉求总量',
        count: 0,
        unit: '宗',
        value: 'todayNum'
      },
      {
        name: '本日“117”机制办理事项量',
        count: 0,
        unit: '宗',
        value: 'today117Num'
      },
      {
        name: '本日已办结事项量',
        count: 0,
        unit: '宗',
        value: 'doneNum'
      },
      {
        name: '本日未办结事项量',
        count: 0,
        unit: '宗',
        value: 'undoneNum'
      },
      {
        name: '本日办结满意率',
        count: 0,
        unit: '%',
        value: 'myl'
      },
      {
        name: '本日不满意事项量',
        count: 0,
        unit: '宗',
        value: 'bmyNum'
      }
    ]
  }
])
let showObj = ref(itemStyle2Data.value[0])
/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
const getData = (type: number = 0) => {
  itemStyle2Data.value[type].list.forEach((item) => {
    // console.log(homeStore.itemStyle2Data[item.value])
    item.count = homeStore.itemStyle2Data[item.value]
  })
  showObj.value = itemStyle2Data.value[type]
}
defineExpose({
  getData
})
</script>

<style lang="scss" scoped>
.item-style2 {
  position: relative;

  .item-style2bg {
    position: absolute;
    z-index: 10;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .item-style-box {
    width: 269px;
    height: 80px;
    box-sizing: border-box;
    padding: 13px 26px;
    border-radius: 10px;
    background: linear-gradient(89.61deg, rgba(229, 244, 255, 1) 0.82%, rgba(255, 255, 255, 1) 101.93%);

    .count {
      font-weight: bold;

      .count-num {
        font-size: 20px;
        color: rgb(24, 145, 255);
      }

      .count-unit {
        font-size: 20px;
        color: rgb(24, 145, 255);
        margin-bottom: 1.3px;
      }
    }
  }

  .item-style-box:nth-child(odd) {
    background: linear-gradient(89.61deg, rgba(255, 255, 255, 1) 0.82%, rgba(229, 244, 255, 1) 101.93%);

    .count {
      justify-content: flex-end;
    }

    .name {
      text-align: right;
    }
  }
}
</style>
